<template>
  <div class="dis">
    <div class="one">
      <i class="iconfont icon-zuojiantou" @click="fun()"></i>
      <span>&nbsp;&nbsp;歌单广场</span>
    </div>
    <nav>
      <ul>
        <li
          v-for="(v, i) in arr"
          :key="i"
          @click="funa(v, i)"
          :class="{ yangshi: a == i }"
        >
          {{ v.navg }}
        </li>
        <div class="fed"><i class="iconfont icon-caidan"></i></div>
      </ul>
    </nav>
    <Tj1 v-if="this.a == '0'" />
    <Gf2 v-if="this.a == '1'" />
  </div>
</template>

<script>
import Tj1 from "../zujian/tuijian1.vue";
import Gf2 from "./gedan3/guanfang2.vue";

export default {
  data() {
    return {
      a: "0",
      arr: [
        { navg: "推荐" },
        { navg: "官方" },
        { navg: "视频歌单" },
        { navg: "精品" },
        { navg: "华语" },
        { navg: "流行" },
        { navg: "摇滚" },
        { navg: "民谣" },
        { navg: "电子" },
      ],
    };
  },
  methods: {
    fun() {
      this.$router.push("/home");
    },
    funa(v, i) {
      this.a = i;
      console.log(this.a);
      // this.$router.push("/gf2");
    },
  },
  components: {
    Gf2,
    Tj1,
  },
};
</script>

<style scoped>
.yangshi {
  color: red;
  font-weight: 600;
}

.dis {
  margin-bottom: 2rem;
  display: inline-block;
  width: 100%;
}

.icon-caidan {
  font-size: 0.48rem;
  line-height: 0.8rem;
  color: rgb(109, 109, 109);
}
.fed {
  position: absolute;
  right: -0.5rem;
  top: 1.34rem;
  width: 1.2rem;
  text-align: center;
  box-shadow: -5px 0 5px #ccc;
  background-color: #fff;
  margin-right: 0.5rem;
}
.one {
  width: 100%;
  height: 1.2rem;
  line-height: 1.2rem;
}
nav {
  width: 100%;
  height: 1.2rem;

  display: block;
  overflow-x: scroll;
}
nav ul {
  display: flex;
  overflow-x: auto;
  width: 160%;
}
nav ul li {
  width: 1.2rem;
  display: flex;
  line-height: 1.2rem;
  justify-content: center;
  font-size: 0.3rem;
  overflow-x: auto;
  color: rgb(109, 109, 109);
}
.icon-zuojiantou {
  font-size: 0.58rem;
  margin-left: 0.3rem;
}
span {
  font-size: 0.4rem;
  font-weight: 600;
}
</style>